 <template>
  <div class="home">
    <header-top/>
    <div id="main">
      <div class="top">
        <mt-swipe   ref="swipeWrapper">
          <mt-swipe-item class="swip-item-1 item">
            <img width="100%"  height="100%"  src="../../static/img/orange.jpg" alt="">
          </mt-swipe-item>
          <mt-swipe-item class="swip-item-2 item">
            <img width="100%"  height="100%" src="../../static/img/apple.jpg" alt="">
          </mt-swipe-item>
          <mt-swipe-item class="swip-item-3 item">
            <img width="100%"  height="100%"  src="../../static/img/blueberry.jpg" alt="">
          </mt-swipe-item>
        </mt-swipe>
      </div>

      <div class="bottom-container">
        <div class="left">
          <div class="left-item" @click="$router.push(`/detail/${index}`)" v-for="(item,index) in list" :key="index">
            <img class="big-img" width="100%" :src="item.img" alt="">
            <div class="left-item-bottom">
              <p >{{item.text}}</p>
                <div class="footer">
                  <div class="footer-left">
                    <img width="20px" height="20px" :src="item.userImg" alt="">
                    <span>{{item.userName}}</span>
                  </div>
                  <div class="footer-right">
                    <i class="van-icon van-icon-like-o"></i>
                    <span>{{item.loveNum}}</span>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="left-item" @click="$router.push(`/detail/${index}`)" v-for="(item,index) in list2" :key="index">
            <img class="big-img" width="100%" :src="item.img" alt="">
            <div class="left-item-bottom">
              <p >{{item.text}}</p>
                <div class="footer">
                  <div class="footer-left">
                    <img width="20px" height="20px" :src="item.userImg" alt="">
                    <span>{{item.userName}}</span>
                  </div>
                  <div class="footer-right">
                    <i class="van-icon van-icon-like-o"></i>
                    <span>{{item.loveNum}}</span>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import HeaderTop from './Header/HeaderTop.vue';
export default {
  components: { HeaderTop },
  name: "Home",
  data() {
    return {
      list:[
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2021-01-24/7d906d8d4fec686f62fba4b81312c97d.jpg',
          text:'针不戳针不戳针不戳针不戳针不戳针不戳',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2021-01-24/7d906d8d4fec686f62fba4b81312c97d.jpg',
          text:'针不戳',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2021-01-24/7d906d8d4fec686f62fba4b81312c97d.jpg',
          text:'针不戳针不戳针不戳针不戳针不戳针不戳',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },

      ],
      list2:[
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2021-01-24/7d906d8d4fec686f62fba4b81312c97d.jpg',
          text:'针不戳',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2021-01-24/7d906d8d4fec686f62fba4b81312c97d.jpg',
          text:'针不戳',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2021-01-24/7d906d8d4fec686f62fba4b81312c97d.jpg',
          text:'针不戳针不戳针不戳针不戳针不戳针不戳',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },
        

      ],
      countNum:0
    };
  },
  methods:{
    pushItemList(){
      if(this.getScrollHeight() == this.getWindowHeight() + this.getDocumentTop()){
        this.countNum++
        this.list.push( 
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2019-12-02/09d401f1dd719e9caf1cf9499aec3e36.jpg',
          text:'最新的针不辍',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },
        {
          img:'http://10.203.0.101:8081/shopping/resources/upload/2019-11-27/5514a7636a525d6bba6e96e76af02541.jpg',
          text:'最新的最新的针不辍最新的针不辍',
          userImg:'../../static/1.jpg',
          userName:'15976912781',
          loveNum:0
        },)
        this.list2.push(
          {
            img:'http://10.203.0.101:8081/shopping/resources/upload/2019-12-02/09d401f1dd719e9caf1cf9499aec3e36.jpg',
            text:'针不辍',
            userImg:'../../static/1.jpg',
            userName:'15976912781',
            loveNum:0
          },
          {
            img:'http://10.203.0.101:8081/shopping/resources/upload/2019-11-27/5514a7636a525d6bba6e96e76af02541.jpg',
            text:'明明白白的小明啊',
            userImg:'../../static/1.jpg',
            userName:'15976912781',
            loveNum:0
          },
        )
        if(this.countNum === 3){
          window.removeEventListener('scroll',this.pushItemList);
        }

      }
    },
    getDocumentTop(){
      let scrollTop  = document.documentElement.scrollTop;
      return scrollTop;
    },
    getWindowHeight() {
        let windowHeight = document.documentElement.clientHeight;   
        return windowHeight;
    },
    getScrollHeight(){
      let scrollHeight = document.documentElement.scrollHeight; 
      return scrollHeight;
    }

  },
  mounted(){
    window.addEventListener('scroll',this.pushItemList)
  }
};
</script>
<style scoped>
  .home{
    width: 100vw;
    background: #ddddddbd;;
  }
  .top >>> .mint-swipe {
    width: 100%;
    height: 100%;
  }
  .top{
    height: 30vh;
  }
  #main{
    margin-bottom: 6vh;
  }
  .bottom-container{
    display: flex;
    width: 100%;
  }
  .left{
    width: 46%;
    margin:0px 2%;
  }
  .big-img{
    vertical-align: text-bottom;
    border-radius: 10px 10px 0 0;
  }
  .left-item-bottom{
    background: white;
  }
  .left-item{
    border-radius: 0 0 10px 10px;
    margin-top: 10px;
  }
  .footer{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  .left-item p{
    margin: 0px;
  }
  .footer-left{
    width: 60%;
  }
 .footer-left img{
   border-radius: 50%;
   
 }
.footer-left span{
  vertical-align: top;
}
 .footer-right{
   width: 30%;
 }



  .right{
    width: 46%;
    margin:0px 2%;
  }
</style>